{% extends 'layout.html' %}

{% block head %}
{% endblock %}

{% block main %}

{% for book in books %}

<div class="row justify-content-center align-items-center">
    <div class="d-flex col-8 my-3">
        <img class="cover" src="{{book.cover}}" alt="" />
        <div class="ms-2">
            <a href="/book/{{book.id}}/" class="h3">{{ book.name }}</a>
            <p class="my-3">{{ book.description | slice:":72"}}{% if book.description|length > 72 %}...{% endif %}</p>
            <p class="text-danger mb-0">&yen;<span class="h3 mb-0">{{ book.price }}</span></p>
        </div>
    </div>
</div>

{% endfor %}
{% endblock %}